<template>
    <div class="tags">
        <div class="tag-cloud">
            <div class="tag-cloud-title">目前共计 {{ tags.length }} 个标签</div>
            <div class="tag-cloud-tags" :style="'min-height:' + minHeight">
                <li 
                    v-for="(tag, index) in tags" 
                        :key='index' 
                        :style='{ "font-size": setFontSize(tag), "color": setColor(tag) }'
                        @click="changeTag(tag.id)"
                    >{{ tag.name }}</li>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'TagDom',
    data() {
        return {
            tags: [],
            params: {
                query: {
                    tag_id: 0
                }
            },
            minHeight: 0,
            minCount: 0,
            maxCount: 0
        }
    },
    mounted() {
        // this.$Api.tags.index().then((res) => {
        //     console.log(res)
        // }).catch(() => {

        // })
        this.getTagsList()
    },
    methods: {
        setFontSize(tag) {
            const minFontSize = 12
            const maxFontSize = 30
            let spread = this.maxCount - this.minCount;

            if(spread === 0) spread = 1

            const size = minFontSize + (tag.count - this.minCount) * (maxFontSize - minFontSize) / spread;
            return size.toFixed(2) + 'px';
        },
        setColor(tag) {
            let color = {
                r: 0,
                g: 0,
                b: 0
            }
            // let min = this.minCount;
            // let max = this.maxCount;
            const minHex = parseInt('33', 16);
            const maxHex = parseInt('99', 16);

            color = this.getRGB(minHex, maxHex);
            return '#' + this.toHex(color.r) + this.toHex(color.g) + this.toHex(color.b);
        },
        getRGB(min, max) {
            return {
                r: min + Math.round(Math.random() * 1000) % (max - min),
                g: min + Math.round(Math.random() * 1000) % (max - min),
                b: min + Math.round(Math.random() * 1000) % (max - min)
            }
        },
        toHex(val) {
            let hex = '00';
            if (val) {
                hex = parseInt(val).toString(16);
                if (hex.length === 1) {
                    hex = '0' + hex;
                }
            }
            return hex;
        },
        getTagsList() {
            this.$Api.getTags().then(res => {
                this.tags = res.data.list;
                this.minCount = res.data.minCount;
                this.maxCount = res.data.maxCount;
            }).catch(error => {
                if (error !== 'error') {
                    this.$message({ type: 'error', message: '加载失败!', showClose: true })
                }
            }).finally(() => {
            })
        },
        changeTag(id) {
            // this.$router.push({path: `/tags/${id}`})
        }
    }

}
</script>
<style lang="less" scoped>
.tags {
    text-align: center;
    line-height: 2;

    h2 {
        line-height: 100px;
        color: #555;
        font-weight: 500;
    }

    h5 {
        font-weight: 500;
        color: #555;
    }

    .tag-cloud {
        width: 70%;
        margin: 10% auto;

        li {
            list-style: none;
            display: inline-block;
            margin: 10px;
            cursor: pointer;
        }

    }

}
</style>